<template>
	<view>
		<view @click="isShow = true" class="topbox">{{number + 1}}/{{questions.length}}</view>
		<view class="contentbox">
			<view class="title" :class="{mb: questions[number].type!='tian'}">
				<span style="font-weight: normal;">({{ optype(questions[number].type) }})</span>
				{{questions[number].title}}
			</view>
			<!-- 单选、判断 -->
			<view v-if="questions[number].type=='dan' || questions[number].type=='pan'" v-for="(item, index) in questions[number].options" :key="item.code">
				<view :class="{falseCss: item.code==answers[number] && answers[number] != questions[number].answer, trueCss: item.code==questions[number].answer, option: true}">{{item.code}}. {{item.option}}</view>
			</view>
			<!-- 多选 -->
			<view v-if="questions[number].type=='duo'" v-for="(item, index) in questions[number].options" :key="item.code">
				<view :class="{falseCss: record[index]==2, trueCss: record[index]==1, noneCss: record[index]==0, option: true}">{{item.code}}. {{item.option}}</view>
			</view>
		</view>
		<view class="answerbox" :class="{spcss: questions[number].type != 'tian'}">
			<view class="trueanswer" >正确答案：<text>{{questions[number].answer}}</text></view>
			<view class="myanswer" v-show="answers[number] != questions[number].answer">我的答案：<text>{{answers[number]}}</text></view>
		</view>
		<view class="analysisbox">
			<view>解析</view>
			<text>{{questions[number].analysis}}</text>
		</view>
		<view class="dolist">
			<view @click="collectShow = true">收藏</view>|
			<view @click="navToComment">评论</view>
		</view>
		<view class="btnbox">
			<button type="primary" @click="calc(-1, questions[number-1].type)" v-show="number!=0">上一题</button>
			<button type="primary" @click="calc(1, questions[number+1].type)" v-show="number!=questions.length-1">下一题</button>
		</view>
		<!-- 选项列表页面 -->
		<view class="cover" v-if="isShow" @click="isShow = false">
			<scroll-view scroll-y class="popbox">
				<text v-for="(item, index) in questions" :key="item.code" :class="{numberBtn: true, trueCss: answers[index] == questions[index].answer, falseCss: answers[index] != questions[index].answer}" @click="numberCalc(index)">{{index+1}}</text>
			</scroll-view>
		</view>
		<!-- 收藏页面 -->
		<view class="cover" v-if="collectShow">
			<view class="popbox">
				<view>收藏夹</view>
				<hr>
				<button type="primary" @click="addfolder">新建</button>
				<scroll-view scroll-y style="height: 50vh;">
					<button v-for="(item, index) in collectlist" plain @click="addCollect(item)">{{item.foldername}}</button>
				</scroll-view>
				<button @click="collectShow = false">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import dan from "../../components/dan.vue"
	import duo from "../../components/duo.vue"
	
	import { getcollectlist, addcollectquestion } from '../../apis/questionAPI.js'
	
	export default {
		components: {
			dan,
			duo
		},
		data() {
			return {
				isShow: false,
				record: [],
				answers: [],
				number: 0,
				questions: [],
				collectShow: false,
				collectlist: [],
				areaShow:false,
				areaTxt:'',
			}
		},
		computed:{
			optype() {
				return (type) => {
					switch (type) {
						case 'tian': return '填空'
						case 'duo': return '多选'
						case 'pan': return '判断'
						case 'dan': return '单选'
					}
				}
			}
		},
		onLoad(option) {
			if (option.isAll == 'true') {
				this.questions = this.$store.state.questions
				this.answers = this.$store.state.answers
				this.calc(option.n - 0, this.$store.state.questions[option.n].type)
			} else {
				let qArr = []
				let aArr = []
				let questions = this.$store.state.questions
				let answers = this.$store.state.answers
				let errors = this.$store.state.errorindexs
				let length = this.$store.state.errorindexs.length
				for (let i=0; i<length; i++) {
					qArr.push(questions[errors[i]])
					aArr.push(answers[errors[i]])
				}
				this.answers = aArr
				this.questions = qArr
				this.calc(0, qArr[0].type)
			}
			
			// 获取收藏列表
			let that = this
			if (this.$store.state.collectlist == null) {
				// 获取收藏列表
				getcollectlist({
					username: uni.getStorageSync('token')
				}).then(res => {
					// console.log(res.collectlist)
					that.$store.dispatch('setcollectlist', res.collectlist)
					that.collectlist = res.collectlist
					// console.log(res.collectlist)
				})
			} else {
				this.collectlist = this.$store.state.collectlist
			}
		},
		methods: {
			// 跳转题目
			calc(n, type) {
				// console.log(this.number, n, type)
				if (type == 'duo') {
					this.duoCalc(n)
				} else {
					this.number = this.number + n
				}
			},
			// 跳转多选题时的处理
			duoCalc(n) {
				// console.log(this.answers[this.number])
				// console.log(this.questions[this.number])
				this.number = this.number + n
				let arr = []
				let option = ''
				for (let j=0; j<this.questions[this.number].options.length; j++) {
					option = this.questions[this.number].options[j].code
					if (this.answers[this.number].indexOf(option) === -1 && this.questions[this.number].answer.indexOf(option) !== -1) {
						// 未选
						arr.push(0)
					} else if (this.answers[this.number].indexOf(option) !== -1 && this.questions[this.number].answer.indexOf(option) !== -1) {
						// 选对
						arr.push(1)
					} else if (this.answers[this.number].indexOf(option) !== -1 && this.questions[this.number].answer.indexOf(option) === -1) {
						// 错选
						arr.push(2)
					}
				}
				this.record = arr
			},
			// 计算跳转到第几题
			numberCalc(index) {
				let length = index - this.number
				this.calc(length, this.questions[index].type)	
			},
			// 添加收藏
			addCollect(item) {
				// {
				// 	name: '收藏夹',
				// 	questionIds: [0, 3, 1]
				// }
				// 判断该收藏夹是否存在该问题
				let flag = false
				for (let i=0; i<item.questionIds.length; i++) {
					if (item.questionIds[i] == this.questions[this.number].id) {
						flag = true
						break
					}
				}
				if (flag) {
					uni.showToast({
					    title: '已存在收藏夹',
					    duration: 1000,
					    icon: "none"
					})
				} else {
					let that = this
					addcollectquestion({
						username: uni.getStorageSync('token'),
						foldername: item.foldername,
						questionId: this.questions[this.number].id
					}).then(res => {
						item.questionIds.push(that.questions[that.number].id)
						that.$store.dispatch('setcollectitem', item)
						uni.showToast({
						    title: '添加成功',
						    duration: 1000,
						    icon: "success"
						})
					})
				}
			},
			// 新建文件夹
			addfolder() {
				const that = this
				uni.showModal({
					title: '新建收藏夹',
					confirmColor:'#3A3A3A',
					cancelColor:'#999999',
					confirmText:'保存',
					editable: true,//显示
					content:'',
					success: function (res) {
						// console.log(res)
						if (res.confirm) {
							if (res.content.split(' ').join('') == '') {
								uni.showToast({
								    title: '输入内容不能为空',
								    duration: 1000,
								    icon: "none"
								})
								return
							}
							addcollectquestion({
								username: uni.getStorageSync('token'),
								foldername: res.content,
								questionId: that.questions[that.number].id
							}).then(r => {
								let item = {
									username: uni.getStorageSync('token'),
									foldername: res.content,
									questionIds: [that.questions[that.number].id]
								}
								that.$store.dispatch('setcollectitem', item)
								that.collectlist.push(item)
								// console.log(that.collectlist)
								uni.showToast({
								    title: '添加成功',
								    duration: 1000,
								    icon: "success"
								})
							})
						}
					},
				})
			},
			// 跳转评论页面
			navToComment() {
				// console.log(this.questions[this.number].id)
				uni.navigateTo({
					url: `/pages/comment/comment?questionId=${this.questions[this.number].id}`
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.numberBtn {
		display: inline-block;
		border: 1px solid #000;
		border-radius: 50%;
		line-height: 8vw;
		width: 8vw;
		height: 8vw;
		margin: 1vw;
		text-align: center;
	}
	.trueCss {
		background-color: rgba(0, 128, 0, .3);
	}
	.falseCss {
		background-color: rgba(128, 0, 0, .3);
	}
	.noneCss {
		background-color: rgba(255, 255, 0, .3);
	}
	.topbox {
		width: 94vw;
		background-color: #f8f8f8;
		height: 5vh;
		text-align: center;
		line-height: 5vh;
		margin: 2vh auto;
		font-size: 2.8vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
	}
	.contentbox {
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 1vh 3vw;
		margin: 2vh auto;
		font-size: 2.8vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		.title {
			font-weight: bold;
		}
		
		.mb {
			margin-bottom: 2vh;
		}
		
		.option {
			padding-left: 5vw;
			line-height: 5vh;
			margin-bottom: 1vh;
		}
	}
	.answerbox {
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 1vh 5vw;
		margin: 2vh auto;
		font-size: 2.5vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		.trueanswer {
			margin-bottom: 1vh;
			text {
				color: rgba(0, 128, 0, .5);
			}
		}
		
		.myanswer {
			text {
				color: rgba(128, 0, 0, .5);
			}
		}
	}
	.spcss {
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		.trueanswer {
			margin-bottom: 0;
		}
	}
	.analysisbox {
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		margin: 2vh auto;
		font-size: 2.5vh;
		padding: 1vh 3vw;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		view {
			margin-bottom: 1vh;
			font-weight: bold;
		}
	}
	.dolist {
		display: flex;
		width: 94vw;
		background-color: #f8f8f8;
		justify-content: space-evenly;
		align-items: center;
		height: 6.5vh;
		margin: 2vh auto;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
	}
	.btnbox {
		display: flex;
		width: 94vw;
		margin: 2vh auto;
		
		button {
			width: 40vw;
		}
	}
	.cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(238, 238, 238, .9);
		
		.popbox {
			text-align: center;
			position: absolute;
			width: 74vw;
			max-height: 70vh;
			// overflow-y: ;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%);
			z-index: 10;
			background-color: #f8f8f8;
			padding: 2vh;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 10px;
			
			button {
				margin: 1vh auto;
			}
		}
	}
</style>
